<template>
  <view class="count-down" :style="{'background-image':'url(' + metaData.bgUrl + ')'}">
    <view class="total-num">
      <text class="num">{{firstNum}}</text>
      <text class="num">{{secondNum}}</text>
      <text class="num">{{thirdNum}}</text>
    </view>
  </view>
</template>

<script>
    export default {
        name: "index",
        props:{
            metaData:{
                type:Object,
                default:function () {
                    return [
                    ]
                }
            }
        },
        computed:{
            firstNum(){
                return this.metaData.day[0];
            },
            secondNum(){
                return this.metaData.day[1];
            },
            thirdNum(){
                return this.metaData.day[2];
            }
        }
    }
</script>

<style scoped>
.count-down {
  width: 710upx;
  height: 120upx;
  margin: 0 auto;
  /*background-image: url("~@/static/img/home/count-down.png");*/
  background-size: 100% 100%;
  position: relative;
}
  .total-num {
    width: 218upx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: absolute;
    top: 35upx;
    left: 400upx;
  }
  .num {
    width: 60upx;
    height: 60upx;
    background-color: #f1685d;
    border-radius: 8upx;
    text-align: center;
    line-height: 60upx;
    color: #fff;
  }
</style>